<template>
  <el-dialog
    title="选择分站"
    :visible.sync="dialogData.dialogVisible"
    :modal="modal"
    width="800px"
    class="dialogCt"
    @open="openDialog"
  >
    <div>
      <el-card class="filter-container" shadow="never">
        <div>
          <i class="el-icon-search"/>
          <span>筛选搜索</span>
          <el-button style="float:right" type="primary" size="small" @click="handleSearchList">查询搜索</el-button>
          <el-button
            style="float:right;margin-right: 15px"
            size="small"
            @click="handleResetSearch()"
          >重置
          </el-button>
          <el-button
            style="float:right;margin-right: 5px"
            size="small"
            @click="handleRefreshList"
          >刷新
          </el-button>
        </div>
        <div style="margin-top: 15px">
          <el-form :inline="true" :model="listQuery" size="small" label-width="90px">
            <el-form-item label="分站名称">
              <el-input v-model="listQuery.groupName" class="input-width"/>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <div class="table-container">
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="list"
          style="width: 100%;"
          border
          @select="changeSelect"
          @select-all="changeSelect"
          @row-click="rowClick"
        >
          <el-table-column type="selection" width="60" align="center"/>
          <el-table-column label="分站名称" align="center">
            <template slot-scope="scope">{{ scope.row.groupName}}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          layout="total, sizes,prev, pager, next,jumper"
          :current-page.sync="listQuery.current"
          :page-size="listQuery.size"
          :page-sizes="[5,10,15]"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogData.dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleAffirmBtn">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import * as api from '@/api/member-manage'

  const defaultListQuery = {
    id: '',
    /*storeName: '',
    userName: '',*/
    groupName: '',
    current: 1,
    size: 10
  }
  export default {
    name: 'SelectUserDialog',
    props: {
      dialogData: {
        type: Object,
        default: function () {
          return {
            dialogVisible: false,
            value: '',
            id: ''
          }
        }
      },
      reset: {
        type: Boolean,
        default: true
      },
      modal: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        listQuery: Object.assign({}, defaultListQuery),
        listLoading: true,
        list: [],
        total: null,
        operateType: null,
        operateOptions: [],
        multipleSelection: []
      }
    },
    created () {
      this.getList()
    },
    methods: {
      openDialog () {
        /*if (!this.reset) {
          this.handleResetSearch()
        }*/
        this.handleResetSearch()

      },
      handleRefreshList () {
        this.getList()
      },
      handleResetSearch () {
        this.listQuery = Object.assign({}, defaultListQuery)
        this.getList()
      },
      handleSearchList () {
        this.listQuery.current = 1
        this.getList()
      },
      /* 表格复选框改变 */
      changeSelect (selection,row) {
        if(row){
          row.isChecked = !row.isChecked
        }else {
          if(selection.length>0){
            selection.forEach((item)=>{
              item.isChecked  = true
            })
          }else {
            selection.forEach((item)=>{
              item.isChecked  = false
            })
          }
        }
        this.multipleSelection = selection
      },
      handleSizeChange (val) {
        this.listQuery.current = 1
        this.listQuery.size = val
        this.getList()
      },
      handleCurrentChange (val) {
        this.listQuery.current = val
        this.getList()
      },
      /* 获取客户列表 */
      getList () {
        this.listLoading = true
        api
          .getGroupList(this.listQuery)
          .then(response => {
            this.listLoading = false
              let list =   response.data.records
            list.forEach((item)=>{
              item.isChecked  = false
            })
            this.list = list
            this.total = response.data.total
          })
          .catch(() => {
            this.listLoading = false
          })
      },
      /* 点击本行 */
      rowClick (row) {
        let that = this;
        let multipleSelection = []
        that.list.forEach((item)=>{
          if(item.id == row.id){
            if(!row.isChecked){
              item.isChecked = true
              that.$refs.table.toggleRowSelection(item, true)
            } else {
              that.$refs.table.toggleRowSelection(item, false)
              item.isChecked = false
            }
          }
        })

        that.list.forEach((item)=>{
          if(item.isChecked){
            multipleSelection = multipleSelection.concat(item)
          }
        })
        that.multipleSelection = multipleSelection

      },
      /* 确定按钮 */
      handleAffirmBtn () {
        if (this.multipleSelection == null || this.multipleSelection.length < 1) {
          this.$message({
            message: '您还没有选择分站',
            type: 'warning',
            duration: 3000
          })
          return
        } else {
          this.dialogData.dialogVisible = false
          this.$emit('selectSucc', this.multipleSelection)
          this.$refs.table.clearSelection()
          this.multipleSelection = []
        }
      }
    }
  }
</script>
<style scoped>
  .input-width {
    width: 135px;
  }
</style>
